
import ChartsConfig from '../../../config/ChartsConfig';
import { observer } from 'mobx-react';
import ChartStore from '../../../stores/ChartStore';



export const RangeTabs = observer(() =>{
     return (
        <div className="rangeTabWrapper">
            <div className="taberContainer">
               {ChartStore.annotationRange.length==0&& <div className="tabBar" style={{
                    width: (100 / ChartsConfig.rangeTabs.length) + '%',
                    left: ChartStore.checkedRangePosition
                }}
                ></div>}
                <div className="taber">
                    {ChartsConfig.rangeTabs.map((t, i) => {
                        return <div key={i} className={ChartStore.rangeTab === t.year ? 'tabItemChecked' : 'tabItem'} onClick={() => {
                            ChartStore.annotationRange=[];
                            ChartStore.changeRangeTab(t.year, i);
                            return;
                        }}>
                            {t.text}
                        </div>
                    })}
                </div>

            </div>
        </div>
    );
                })